import React, { useEffect, useState } from "react";
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { Link, Outlet, useLocation } from 'react-router-dom'
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

// const getRouteIndex = (paths) => ['', 'react', 'router', 'redux', 'other', 'game',].findIndex(i => i === paths).toString()

const Shouye = (props) => {

    const location = useLocation()
    let route = location.pathname.split('/')[1]

    const [paths, setPaths] = useState(route)

    return (
        <Layout>
            <Header className="header">
                <div className="logo" />
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={[paths]}
                    style={{ lineHeight: '64px' }}
                >
                    <Menu.Item key="react"><Link to='react'>react</Link></Menu.Item>
                    <Menu.Item key="router"><Link to='router'>router</Link></Menu.Item>
                    <Menu.Item key="redux"><Link to='redux'>redux</Link></Menu.Item>
                    <Menu.Item key="other"><Link to='other'>其他</Link></Menu.Item>
                    <Menu.Item key="game"><Link to='game'>小游戏</Link></Menu.Item>
                    <Menu.Item key="method"><Link to='method'>Method</Link></Menu.Item>
                    <Menu.Item key="markdown"><Link to='markdown'>markdown</Link></Menu.Item>
                    <Menu.Item key="file"><Link to='file'>文件上传</Link></Menu.Item>
                </Menu>

            </Header>
            <Content style={{ padding: '50px 50px 0px' }}>
                <Layout style={{ padding: '24px 0', background: '#fff' }}>
                    <Content style={{ padding: '0 24px', minHeight: 300, }}>
                        <Outlet />
                    </Content>
                </Layout>
            </Content>
            <Footer style={{ textAlign: 'center' }}>联系我：qq:2574325512   wx:15133084540 </Footer>
        </Layout>

    )
}
export default Shouye